<template>
  <div class="welcome stick-wrapper">
    <Nav :title="title"></Nav>
    <div class="content">
      <img src="../assets/meckey-circle.jpg" class="circle-logo animation-logo">
      <h2 class="title animation-title">MecKey云计算 <span class="version">v1.0</span></h2>
      <p class="tags animation-subtitle">精准、快速、专业</p>
      <p class="sub-title animation-subtitle">为您定制最佳的解决方案</p>
    </div>
    <router-link class="start animation-subtitle" to="electric_form">开始计算</router-link>
    <div class="stick-footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Nav from '../components/Nav'
import Footer from '../components/Footer'

export default {
  name: 'Welcome',
  data () {
    return {
      title: '云计算 - MecKey能源商城'
    }
  },
  components: {
    Nav,
    Footer
  },
  mounted () {
    this.$http.post('/wechat_jssdk_conf').then(res => {
      if (res.status === 200) {
        const appId = res.data.appId
        const noncestr = res.data.noncestr
        const timestamp = res.data.timestamp
        const signature = res.data.signature
        const wx = this.$wx

        wx.config({
          debug: false,
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature,// 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        });

        const shareTitle = '储能云计算 - 能源商城'
        const shareDesc = 'MecKey能源云计算为您定制最佳的解决方案。'
        const shareIcon = 'https://www.nengyuan.shop/static/index_module/pages/energy_store/img/meckey-circle.4fef959d.jpg'

        wx.ready(function () {
          wx.updateAppMessageShareData({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareIcon, // 分享图标
            success: function () {
              // 设置成功
            }
          });

          wx.updateTimelineShareData({
            title: shareTitle, // 分享标题
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareIcon, // 分享图标
            success: function () {
              // 设置成功
            }
          })
        });
      }
    })
  }
}
</script>

<style scoped>
  .welcome {
    position: relative;
  }
  .content {
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
  }
  .circle-logo {
    margin-top: 30px;
  }
  .content h2.title {
    font-size: 18px;
    margin-top: 0;
    opacity: 0;
  }
  h2.title .version {
    font-size: 12px;
    font-weight: normal;
  }
  .content p.tags {
    color: #7c777c;
    text-align: center;
    font-size: 13px;
    margin-bottom: 80px;
  }
  .content p.sub-title {
    text-align: center;
    font-size: 15px;
    color: #7c777c;
  }
  .animation-logo {
    animation: moveIn 1s;
  }
  .animation-title {
    animation: fadeOutIn 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .animation-subtitle {
    opacity: 0;
    animation: fadeOutIn .8s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
  }
  .start {
    display: block;
    width: calc(100% - 32px);
    line-height: 50px;
    background-color: #0095ff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    position: absolute;
    left: 16px;
    bottom: 140px;
  }
</style>
